<script setup lang="ts">
import { reactive } from "vue";
import { verify, resetPassword } from '@/api/login.js'
import { ElMessage } from "element-plus";

interface forgetData {
  account: number,
  email: string,
  password: string,
  rePassword: string,
}

const forgetData: forgetData = reactive({
  account: null,
  email: '',
  password: '',
  rePassword: '',
})
//弹框状态,默认关闭
const state = reactive({
  forgetTip: false,
  changeTip: false
})
//打开忘记密码弹框
const open = () => {
  state.forgetTip = true;
}
defineExpose({
  open
})
//表单规则
const rules = reactive({
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  rePassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
  ]
})
//忘记密码点击下一步
const verifyData = async () => {
  const res = await verify(forgetData)
  if (res.data.status === 0) {
    ElMessage.success(res.data.message)
    localStorage.setItem('id', res.data.id)
    state.forgetTip = false;
    state.changeTip = true;
  } else {
    ElMessage.error(res.data.message)
  }
}
//重置密码
const reset = async () => {
  if (forgetData.password === forgetData.rePassword) {
    const id = localStorage.getItem('id')
    const res = await resetPassword(id, forgetData.password)
    if (res.data.status === 0) {
      ElMessage.success(res.data.message)
      state.changeTip = false;
    } else {
      ElMessage.error('修改失败');
    }
  } else {
    ElMessage.error('两次密码不一致')
  }
}
</script>

<template>
  <el-dialog v-model="state.forgetTip" title="忘记密码" width="400px">
    <el-form class="register-form" label-position="top" :rules="rules">
      <el-form-item label="账号" prop="account">
        <el-input placeholder="输入你的账号" v-model="forgetData.account"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input placeholder="输入你的邮箱" v-model="forgetData.email"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.forgetTip = false">取消</el-button>
        <el-button type="primary" @click="verifyData">下一步</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="state.changeTip" title="修改密码" width="400px">
    <el-form class="register-form" label-position="top" :rules="rules">
      <el-form-item label="新密码" prop="password">
        <el-input placeholder="输入你的新密码" showPassword v-model="forgetData.password"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="rePassword">
        <el-input placeholder="再次输入你的新密码" showPassword v-model="forgetData.rePassword"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.changeTip = false">取消</el-button>
        <el-button type="primary" @click="reset">下一步</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="sass">

</style>